<template>
    <div class="wrapper">
        <loading :state="loading"></loading>
        <div class="area" @click="chooseArea">
            <span>选择查询地区</span>
            <div class="choose">
                <span v-text="myAreaText"></span>
            </div>
            <img :src=icon alt="">
        </div>
        <area-choose num="2" @getArea="getArea" @allArea="getAllArea" ref="areaShow" />
        <table class="table" style="padding-left: 10px">
            <tr>
                <th>省</th>
                <th>市</th>
                <th>县</th>
                <th>状态</th>
            </tr>
            <tr v-for="(item,index) in agentList" :key="index">
                <td>{{ item.province }}</td>
                <td>{{ item.city }}</td>
                <td>{{ item.country }}</td>
                <td v-if="item.status==='1'" class="highlight">有代理</td>
                <td v-else>无代理</td>
            </tr>
        </table>
    </div>
</template>

<script type="text/ecmascript-6">
    import AreaChoose from '../../components/common/areaChoose';

    export default {
        components: {AreaChoose},
        data() {
            return {
                icon: `${this.$Public.iconImg}arrow_right.svg`,
                myAreaText: '',
                agentList: [], // 筛选后的内容
                loading: false,
                allArea: {}
            };
        },
        methods: {
            chooseArea() {
                this.$refs.areaShow.changeShow();
            },
            getAllArea(area) {
                this.allArea = area;
            },
            getArea(msg) {
                // 省市区三级联动查询
                let data = {};
                if (msg.province === '选择省份' && msg.city === '选择城市') {
                    data.level = 'province';
                    data.province = '';
                    data.city = '';
                    data.country = '';
                    data.areaList = [];
                    for (let i in this.allArea) {
                        if (i.slice(-2) !== '系统') {
                            data.areaList.push(i);
                        }
                    }
                } else if (msg.province !== '选择省份' && msg.city === '选择城市') {
                    data.level = 'city';
                    data.province = msg.province;
                    data.city = '';
                    data.country = '';
                    data.areaList = [];
                    for (let i in this.allArea) {
                        if (msg.province === i) {
                            for (let j in this.allArea[i]) {
                                data.areaList.push(j);
                            }
                        }
                    }
                } else {
                    data.level = 'country';
                    data.province = msg.province;
                    data.city = msg.city;
                    data.country = '';
                    data.areaList = [];
                    for (let i in this.allArea) {
                        if (msg.province === i) {
                            for (let j in this.allArea[i]) {
                                if (msg.city === j) {
                                    data.areaList = this.allArea[i][j];
                                }
                            }
                        }
                    }
                }
                this.myAreaText = data.province + data.city + data.country;
                this.getAgentArea(data);
            },
            getAgentArea(data) {
                this.loading = true;
                this.$Spread.getAgentArea(data).then(res => {
                    this.loading = false;
                    this.agentList = res.list;
                }, () => {
                    this.loading = false;
                    this.$toast({
                        message: '出错了，请重试！',
                        duration: 1500
                    });
                });
            }
        }
    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "../../assets/stylus/main.styl";
    .highlight{
        color: main-color
    }
    .wrapper{
        background white
        /*min-height:100vh*/
    }
    .area {
        align-items center
        background #fff
        height 11.8vw
        width 100vw
        display flex
        padding 10px
        font-size 3.7vw
        color #333
        box-sizing border-box
        .choose {
            margin-left 10px
            justify-content: flex-end;
            display: flex;
            flex: 1
            color #999
            span {
                margin-right 10px
            }
        }
        & img{
            width:5vw
            height:5vw
        }
    }
    .table{
        width: 100%;
        max-width: 100%;
        margin-bottom: 20px;
        border-top:10px solid bk-color
        & tr{
          bor-b();
            & th{
                font-size word14
                padding 2vw 0
            }
            & td{
                font-size word14
                font-weight:normal
                padding 2vw 0
                text-align center
            }
        }
    }
</style>
